<template>
  <div class="filemove">
    <div class="back">
      <div
        class="backBtn"
        :style="{backgroundImage: 'url('+backImg+')'}"
        @click="back"
      />
    </div>
    <div class="main">
      <div
        class="outDir input_item_long"
        :title="defaultOutPath"
      >
        {{ defaultOutPath }}
      </div>
      <div
        class="inDir input_item_long"
        :title="defaultInPath"
      >
        {{ defaultInPath }}
      </div>
      <div class="fomate_setting">
        <el-input
          v-model="fomateSetting"
          placeholder="请输入格式"
        />
      </div>
      <div class="tip">
        {{ tip }}
      </div>
      <div
        class="outBtn"
        :style="{backgroundImage: 'url('+outimg+')'}"
        @click="getOutDir"
      />
      <div
        class="inBtn"
        :style="{backgroundImage: 'url('+inimg+')'}"
        @click="getInDir"
      />
      <div
        class="startBtn"
        :style="{backgroundImage: 'url('+startimg+')'}"
        @click="start"
      />
    </div>
    <div
      class="bottomLine"
      :style="{width: bottomLineWidth+'px'}"
    />
    <div
      class="shade"
      :style="{display:shadeshow}"
    >
      <img
        :src="loadingimg"
      >
    </div>
  </div>
</template>

<script>
const remote = window.require('@electron/remote')
const fs = window.require('fs')
const path = window.require('path')
export default {
  name: 'Home',
  components: {
  },
  data: function () {
    return {
      backImg: require('../../assets/back.png'),
      outimg: require('../../assets/out.png'),
      inimg: require('../../assets/in.png'),
      startimg: require('../../assets/start.png'),
      loadingimg: require('../../assets/loading.gif'),
      outTitle: '',
      inTitle: '',
      fomateSetting: 'png',
      tip: '<-- 请设置需要搬运文件的格式',
      bottomLineWidth: 0,
      bottomTatolWidth: 740,
      defaultOutPath: '',
      defaultInPath: '',
      fileArray: [],
      shadeshow: 'none'
    }
  },
  mounted () {
    this.defaultOutPath = this.$elestore.get('defaultOutPath')
    this.defaultInPath = this.$elestore.get('defaultInPath')
  },
  methods: {
    /**
     * @description 返回上一级
     */
    back () {
      this.$router.push('/home/menu')
    },
    /**
     * @description 触发input点击
     */
    triggerOutInput () {
      this.$refs.out_dir_input.dispatchEvent(new MouseEvent('click'))
    },
    /**
     * @description 触发input点击
     */
    triggerInInput () {
      this.$refs.in_dir_input.dispatchEvent(new MouseEvent('click'))
    },
    /**
     * @description 获取导出文件夹
     */
    getOutDir () {
      remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
        defaultPath: this.defaultOutPath,
        properties: ['openDirectory']
      }).then((res) => {
        if (!res.canceled) {
          this.defaultOutPath = res.filePaths[0]
          this.$elestore.set('defaultOutPath', res.filePaths[0])
        }
      })
    },
    /**
     * @description 获取导入文件夹
     */
    getInDir () {
      remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
        defaultPath: this.defaultInPath,
        properties: ['openDirectory']
      }).then((res) => {
        if (!res.canceled) {
          this.defaultInPath = res.filePaths[0]
          this.$elestore.set('defaultInPath', res.filePaths[0])
        }
      })
    },
    /**
     * @description 开始拷贝
     */
    async start () {
      console.log(fs)
      console.log(fs.promises)
      this.shadeshow = 'flex'
      this.fileArray = []
      this.findAllFile(this.defaultOutPath, true)
    },
    /**
     * @description 查找所有需要copy的文件
     */
    async findAllFile (ppath, ifhead) {
      const dirents = await fs.promises.readdir(ppath, { withFileTypes: true })
      for (const dirent of dirents) {
        if (dirent.isFile() && dirent.name.endsWith(`.${this.fomateSetting}`)) {
          // fs.copyFileSync(path.resolve(ppath, dirent.name), path.resolve(this.defaultInPath, dirent.name))
          this.fileArray.push([path.resolve(ppath, dirent.name), dirent.name])
        } else if (dirent.isDirectory()) {
          await this.findAllFile(path.resolve(ppath, dirent.name), false)
        }
      }
      if (ifhead) {
        console.log(`=======${this.fileArray.length}===========`)
        this.copyFiles()
      }
    },
    /**
     * @description copy文件
     */
    async copyFiles () {
      const count = this.fileArray.length - 1
      this.fileArray.forEach((item, index) => {
        fs.copyFileSync(item[0], path.resolve(this.defaultInPath, item[1]))
        if (index !== count) {
          this.bottomLineWidth = this.bottomTatolWidth / (count + 1) * index
        } else {
          this.bottomLineWidth = this.bottomTatolWidth
        }
      })
      this.$message('拷贝完成')
      setTimeout(() => {
        this.bottomLineWidth = 0
        this.shadeshow = 'none'
      }, 5 * 1000)
    }

  }
}
</script>

<style scoped lang="scss">
.back{
    height: 40px;
    width: 100%;
    .backBtn{
        height: 30px;
        width: 30px;
        margin: 5px;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
}
.main{
    height: 210px;
    width: calc(100% - 2px);
    position: relative;
    .input_item_long{
      height: 30px;
      line-height: 30px;
      text-align: left;
      text-indent: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 450px;
      border: 1px solid silver;
      box-shadow:0 0 1px 1px #999;
      color: #999;
    }
    .outDir{
        position: absolute;
        top: 20px;
        left:50px;
    }
    .inDir{
        position: absolute;
        top: 80px;
        left:50px;
    }
    .fomate_setting{
      position: absolute;
      top: 140px;
      left:50px;
      height: 20px;
      width: 100px;
      ::v-deep .el-input{
        height: 30px !important;
      }
      ::v-deep .el-input__inner{
        height: 30px !important;
        background-color: #202124;
        border: 1px solid silver;
        box-shadow:0 0 1px 1px #999;
        color: #999;
      }
    }
    .tip{
      position: absolute;
      top: 140px;
      left:160px;
      height: 30px;
      line-height: 30px;
      color: #999;
      font-size: 15px;
    }
    .outBtn{
        position: absolute;
        top: 20px;
        left:540px;
        height: 30px;
        width: 30px;
        border: 1px solid silver;
        box-shadow:0 0 1px 1px #999;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
    .inBtn{
        position: absolute;
        top: 80px;
        left:540px;
        height: 30px;
        width: 30px;
        border: 1px solid silver;
        box-shadow:0 0 1px 1px #999;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
    .startBtn{
        position: absolute;
        top: 20px;
        left:610px;
        height: 90px;
        width: 90px;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
    }
}
.bottomLine{
  position: absolute;
  bottom:0px;
  height: 5px;
  background-color: cornflowerblue;
}
.shade{
  height:260px;
  width: 740px;
  position: absolute;
  top:35px;
  left: 0;
  z-index: 2;
  background-color: rgba($color: #000000, $alpha: 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    height: 100px;
    width: 100px;
  }
}
</style>
